<template>
	<div id="root">
		<div id="six">
			<img src="/imgs/home/title06.png" alt="" >
			<p id="six-p">基于行业标准严格筛选师资，从教学资历、从业背景、实战经验、授课能力素质素养等多维度严格考核。</p>
			<div id="teacher">
				<div 
					v-for="(t,i) in teacher"
					:key="i"
					class="lecturer"
					:style="{'background-image':'url('+t.url+')'}"
				>
					<div class="intro">
						<span class="intro-name">{{t.name}}</span>
						<p class="intro-p">{{t.job}}</p>
					</div>
				</div>
			</div>

			<button id="choose">立即选择学习课程</button>
		</div>
	</div>
</template>

<script>
export default {
	data () {
		return {
			teacher:[
				{
					url:'/imgs/home/teacher1.jpg',
					name:'谨炎',
					job:'高级网店美工讲师',
				},
				{
					url:'/imgs/home/teacher2.jpg',
					name:'珂月',
					job:'金牌淘拍档运营经理/名淘云课堂天猫淘宝运营讲师',
				},
				{
					url:'/imgs/home/teacher3.jpg',
					name:'明希',
					job:'高级跨境电商讲师',
				},
				{
					url:'/imgs/home/teacher4.jpg',
					name:'霜狼',
					job:'速卖通高级讲师',
				},
				{
					url:'/imgs/home/teacher5.jpg',
					name:'云瑛',
					job:'高级SEO优化讲师',
				},
			],
		};
	},
}
</script>
<style scoped>
#root{
	height: 993px;
	text-align: center;
	padding: 100px 0 76px 0;
	background-image: url(/imgs/home/bj06.png);
}
#six{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
}
#six-p{
	color: #484848;
	font-size: 20px;
	margin: 30px 0 79px 0;
}
#teacher{
	width: 100%;
	height: 432px;
	display: flex;
	justify-content: space-between;
}
.lecturer{
	width: 232px;
	height: 432px;
}
.intro{
	width: 100%;
	height: 72px;
	background-color: rgba(2,178,251,0.7);
	margin-top: 346px;
	color: #ffffff;
	padding: 0 10px;
	text-align: left;
}
.intro-name{
	font-size: 20px;
	line-height: 30px;
	color: #ffffff;
}
.intro-p{
	font-size: 15px;
	font-weight: 400;
}
#choose{
	padding: 25px 118px;
	border:1px solid #041F46;
	background: none;
	color: #041F46;
	font-weight:500;
	font-size: 24px;
	margin-top: 71px;
}
</style>